<!--
    TODO 添加延迟输入触发模式
    TODO 添加高级查询模式
-->
<template>
    <div :class="{'search-small':small}" class="search-input ivu-input-wrapper ivu-input-type ivu-input-group ivu-input-group-with-append ivu-input-hide-icon">
        <input v-model="key" @input="$emit('input',key)" v-on:keyup.enter="trigger" type="text" :placeholder="placeholder" class="ivu-input">
        <div class="ivu-input-group-append">
            <button type="button" class="ivu-btn ivu-btn-ghost ivu-btn-icon-only" @click="trigger">
                <Icon type="ios-search"></Icon>
            </button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'searchInput',
    props: {
        placeholder: {},
        small: {}
    },
    data() {
        return {
            key: null
        }
    },
    methods: {
        trigger() {
            this.$emit('trigger', this.key)
        }
    }
}
</script>
<style lang="less">
div.ivu-input-group.search-input {
    width: 200px;
    float: right;
    padding-bottom: 10px;
}

div.ivu-input-group.search-small {
    >.ivu-input {
        padding: 1px 7px;
        height: 24px;
        border-radius: 3px;
    }
    >.ivu-input-group-append {
        padding: 0px 3px;
        height: 24px;
        border-radius: 3px;
    }
}
</style>
